import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 创建场景对象Scene
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)

// 几何体 + 材质 = 模型
var geometry = new THREE.BoxGeometry(2,2,2)
var material = new THREE.MeshBasicMaterial({color:0xff0000})
var cube = new THREE.Mesh(geometry,material)

scene.add(cube)

camera.position.z = 15  //相机和物体默认都在坐标原点，想看见物体，需要移动相机的位置

// 设置渲染器的大小
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)
// 设置渲染器的颜色
renderer.setClearColor('#8edee2')
document.body.appendChild(renderer.domElement)

function render(){
  
  renderer.render(scene,camera)
}
render()
/** --------------------鼠标控件对象--------------------- */
let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", render); //监听鼠标、键盘事件